<script>
	import BaseLayout from '@/components/BaseLayout/index.vue';
	import {
		conditioningSchemeDetail,
		fiveElementsList,
		startConditioning
	} from '@/services/api/regulate';
	import HumanBody from './three.vue';
	import {
		VITE_IMAGE_URL
	} from '../../utils/http/url.js'
	import {
		getCache
	} from '../../utils/catch';
	export default {
		data() {
			return {
				baseImgUrl: VITE_IMAGE_URL,
				// 方案id
				detailId: '',
				// 轮播图
				slideCustomStyle: {
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center'
				},
				options: {
					effect: 'cards',
					cardsEffect: {
						perSlideOffset: 9,
						perSlideRotate: 2
					}
				},
				list: [],
				acupoint: null,
				acupointKey: Math.random(),
				// 方案详情
				detailInfo: {},
				// 穴位列表
				acupointList: []
			}
		},
		components: {
			HumanBody,
			BaseLayout
		},
		onLoad(options) {
			this.detailId = options?.id;
			// 获取调理方案详情
			this.getConditioningSchemeDetail();
			// 获取五行脏器列表 用于播放音乐
			this.getFiveElementsList();
		},
		onShow() {},
		onHide() {},
		onUnload() {},
		methods: {
			swiperChange(swiper) {
				this.acupoint = '';
				setTimeout(() => {
					this.acupoint = this.acupointList[swiper.activeIndex]?.schemeAcupointList;
					this.acupointKey = Math.random();
				}, 300);
			},
			// 获取调理方案详情
			getConditioningSchemeDetail() {
				conditioningSchemeDetail(this.detailId)
					.then((res) => {
						this.detailInfo = res.data;
						this.acupointList = res.data?.schemeConditioningAcupointList.map((item) => ({
							...item,
							active: 0
						}));
						this.list = new Array(this.acupointList.length).fill('');
						this.acupoint = this.acupointList[0]?.schemeAcupointList;
					})
					.catch(() => {
						uni.showToast({
							icon: 'error',
							title: '获取调理方案详情失败'
						})
					});
			},
			// 确认方案 -> 开始调理
			handleConfirm() {
				let data = {
					schemeConditioningId: this.detailId,
					deviceId: getCache('deviceInfo').id
				};
				startConditioning(data)
					.then((res) => {
						// 本地缓存音乐key
						uni.setStorageSync('musicKey', res.data.musicKey);
						uni.navigateTo({
							url: `/pages/regulate/index?schemeConditioningId=${this.detailId}&conditioningRecordId=${res.data.id}`
						})
					})
					.catch((err) => {
						uni.showToast({
							icon: 'error',
							title: err.msg
						})
					});
			},
			// 获取五行脏器列表
			async getFiveElementsList() {
				try {
					const res = await fiveElementsList({
						paginationRequired: false
					});
					// 本地缓存一份列表 map存储 用于播放音乐, 如果本地没有则直接存到map里,如果有则需要根据版本号判断是否更新,如果接口没有缓存里面有则不更新
					const fiveElementsListMap = uni.getStorageSync('fiveElementsListMap') || {};
					const fiveElementsListData = res?.rows || [];
					fiveElementsListData.forEach((item) => {
						if (!fiveElementsListMap[item.id] || fiveElementsListMap[item.id].musicVersion !== item
							.musicVersion) {
							fiveElementsListMap[item.id] = item;
						}
					});
					// 更新本地缓存
					uni.setStorageSync('fiveElementsListMap', fiveElementsListMap);
				} catch (error) {
					console.log(error);
				}
			},
			back() {
				uni.navigateBack()
			}
		},
	}
</script>

<template>
	<view class="uno-w-full uno-h-100vh">
		<BaseLayout>
			<view class="uno-mx-auto bg1 uno-flex" style="width: 685rpx;height: 84%;margin-top: 14rpx;padding: 20rpx;">
				<view class="uno-h-full" style="width: 52%;">
					<view v-if="acupoint" class="uno-w-full uno-h-full"
						style="display: flex;align-items: center;justify-content: center;">
						<!-- <HumanBody v-if="acupoint" :acupoint="acupoint" /> -->
						<image src="../../static/body.png" mode="scaleToFill" class=""
							style="width: 80%;height: 80%;" />
					</view>
				</view>
				<view class="uno-h-full flex-center" style="width: 4%;">
					<image src="../../static/images/arrow.png" mode="scaleToFill" class=""
						style="width: 24rpx;height: 24rpx;margin: auto;" />
				</view>
				<view class="uno-h-full" style="width: 44%;padding-left: 20rpx;padding-right: 20rpx;">
					<view class="bd1 uno-flex uno-items-center"
						style="width: 178rpx;height: 20rpx;border-radius: 23rpx;padding-left: 12rpx;font-size: 10rpx;color: #FFFFFF;">
						调理方案说明</view>
					<view class="group-wrap">
						<view>
							<view class="text-bg" style="font-size: 10rpx;color: #FFFFFF;font-weight: 700;">介绍：</view>
							<view class=""
								style="font-size: 10rpx;color: #FFFFFF;margin-top: 5rpx;padding-left: 8rpx;height: 100rpx;overflow-y: auto;">
								{{ detailInfo.schemeSymptomType.symptomReason }}
							</view>
						</view>

						<view class="" style="margin-top: 10rpx;">
							<view class="uno-flex uno-items-center">
								<image src="../../static/images/qrfa_icon_jt.png" mode="scaleToFill" class=""
									style="width: 5rpx;height: 9rpx;margin-right: 4rpx;" />
								<text class="text-bg"
									style="font-size: 10rpx;color: #FFFFFF;font-weight: 700;">方案信息</text>
							</view>
							<view class="" style="margin-top: 5rpx;">
								<image src="../../static/images/tlfa_icon_btdb.png" mode="scaleToFill"
									class="uno-w-full uno-block" style="height: 4rpx;" />
							</view>
							<view class="uno-w-full uno-flex uno-flex-wrap uno-justify-between"
								style="font-size: 10rpx;color: #FFFFFF;height: 40rpx;margin-top: 10rpx;">
								<view class="" style="width: 50%;">
									部位：{{ detailInfo.schemeSymptomPosition.positionName || '--' }}
								</view>
								<view class="" style="width: 50%;">
									症状：{{ detailInfo.schemeSymptomType.symptomTypeName || '--' }}
								</view>
								<view class="" style="width: 50%;">
									分类：{{ detailInfo.schemeClassification.schemeTypeName || '--' }}
								</view>
							</view>

							<!-- <view class="uno-w-full" style="height: 122rpx;overflow: hidden;">
								<z-swiper v-model="list" :options="options" @slideChange="swiperChange">
									<z-swiper-item v-for="(item, index) in acupointList" :key="index"
										:custom-style="slideCustomStyle">
										<view class="bg2" style="width: 120rpx;height: 120rpx;padding: 2rpx 8rpx;">
											<view class="uno-w-full bd2 uno-flex uno-justify-start"
												style="height: 20rpx;overflow-x: auto;padding: 0 4rpx;">
												<view v-for="(item1, index1) in item.schemeAcupointList" :key="index1"
													:class="[item.active === index1 ? 'activeTab' : '', 'tabItem']"
													@click="item.active = index1">
													{{ item1.acupointName }}
												</view>
											</view>
											<view class="uno-w-full" style="height: 80rpx;overflow-y: auto;">
												<view class="uno-w-full uno-flex uno-justify-between"
													style="height: 40rpx;position: relative;padding-left: 8rpx;align-items: end;padding-right: 22rpx;">
													<view class="flex-center"
														style="width: 12rpx;height: 12rpx;border-radius: 50%;background: #4A77B4;position: absolute;top: 2rpx;right: 5rpx;">
														<text class=""
															style="color: #FFFFFF;font-size: 7rpx;">{{ index + 1 }}</text>
													</view>
													<view>
														<view class=""
															style="font-size: 7rpx;color: #FFFFFF;margin-bottom: 5rpx;">
															{{ item.schemeAcupointList[item.active].acupointName }}
														</view>
														<view class="" style="font-size: 6rpx;color: #9BC1F4;">穴位名称
														</view>
													</view>
													<view class="" style="width: 20rpx;height: 22rpx;">
														<image
															:src="`${baseImgUrl}${item.schemeAcupointList[item.active].acupointImage}`"
															mode="scaleToFill"
															class="uno-w-full uno-h-full uno-block" />
													</view>
												</view>
												<view class="uno-w-full" style="margin: 6rpx 3rpx 0;">
													<image src="../../static/images/icon2.png" mode="scaleToFill"
														class="uno-w-full uno-h-7rpx uno-block" style="height: 7rpx;" />
												</view>

												<view class="uno-w-full" style="margin-bottom: 5rpx;padding: 0 8rpx;">
													<view class="" style="font-size: 6rpx;color: #9BC1F4;">取穴方法：</view>
													<view class="" style="font-size: 7rpx;color: #FFFFFF;">
														<rich-text
															:nodes="item.schemeAcupointList[item.active].selectionMethod"></rich-text>
													</view>
												</view>

												<view class="uno-w-full" style="margin-bottom: 5rpx;padding: 0 8rpx;">
													<view class="" style="font-size: 6rpx;color: #9BC1F4;">穴位简介：</view>
													<view class="" style="font-size: 7rpx;color: #FFFFFF;">
														<rich-text
															:nodes="item.schemeAcupointList[item.active].introduction"></rich-text>
													</view>
												</view>
											</view>
										</view>
									</z-swiper-item>
								</z-swiper>
							</view> -->
						</view>
					</view>
					<view class="flex-center uno-w-full" style="margin-top: 10rpx;z-index: 100;">
						<image src="../../static/images/qrfa_icon_fh.png" mode="scaleToFill" class=""
							style="width: 44rpx;height: 21rpx;margin-right: 16rpx;" @click="back" />
						<image src="../../static/images/qrfa_icon_qrfa.png" mode="scaleToFill" class=""
							style="width: 73rpx;height: 21rpx;" @click="handleConfirm" />
					</view>
				</view>
			</view>
		</BaseLayout>
	</view>
</template>

<style lang="scss" scoped>
	.uno-w-full {
		width: 100%;
	}

	.uno-h-100vh {
		height: 100vh;
	}

	.uno-h-full {
		height: 100%;
	}

	.uno-block {
		display: block;
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.uno-items-center {
		align-items: center;
	}

	.uno-flex {
		display: flex;
	}

	.uno-flex-wrap {
		flex-wrap: wrap;
	}

	.uno-justify-between {
		justify-content: space-between;
	}

	.uno-justify-start {
		justify-content: start;
	}

	.uno-mx-auto {
		margin-left: auto;
		margin-right: auto;
	}

	.tabItem {
		position: relative;
		width: 20%;
		margin-right: 6rpx;
		flex-shrink: 0;
		height: 100%;
		text-align: left;
		color: #fff;
		font-size: 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden; //超出的文本隐藏
		text-overflow: ellipsis; //溢出用省略号显示
		white-space: nowrap; //溢出不换行
	}

	.activeTab:after {
		content: '';
		width: 10rpx;
		position: absolute;
		margin: 0 auto;
		height: 0.7rpx;
		background-color: rgba(255, 255, 255, 1);
		bottom: 0;
		left: 0;
		right: 0;
	}

	.text-bg {
		background: linear-gradient(0deg, #8cd9fd 0%, #dbf4ff 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.group-wrap {
		width: 100%;
		height: 82%;
		margin-top: 10rpx;
	}

	.bg1 {
		background: url('../../static/images/tlfa_icon_bjk.png');
		background-size: 100% 100%;
	}

	.bd1 {
		background: url('../../static/images/tlfa_icon_yhxx.png');
		background-size: 100% 100%;
	}

	.bg2 {
		background: url('../../static/images/qrfa_icon_k1.png');
		background-size: 100% 100%;
	}

	.bd2 {
		border-bottom: 0.3rpx solid rgba(255, 255, 255, 0.2);
	}

	.ellipsis {
		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 2;
		/*显示文本行数*/
		overflow: hidden;
		/*溢出隐藏*/
	}
</style>